<template>
  <view class="body">
    <view class="top">
      <view class="title">账户余额</view>
      <view class="price">
        <view>
          <text
            style="
              font-size: 64rpx;
              font-family: PingFang SC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
            "
            >{{ cashInfo.money }}</text
          >
          <text
            style="
              font-size: 30rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              margin-left: 10rpx;
            "
            >元</text
          >
        </view>
        <view class="tixian" @click="$utils.toUrl('/distribution/cash/index')"
          >提现</view
        >
      </view>
    </view>
    <view class="icon_c">
      <!-- <view class="icon_i">
        <image
          style="width: 50rpx; height: 50rpx"
          src="../../static/images/order/z_1.png"
        ></image>
        <view style="margin-top: 10rpx">账户明细</view>
      </view> -->
      <view class="icon_i" @click="$utils.toUrl('/distribution/cash/record')">
        <image
          style="width: 50rpx; height: 50rpx"
          src="../static/images/order/z_2.png"
        ></image>
        <view style="margin-top: 10rpx">提现记录</view>
      </view>
      <!-- <view class="icon_i">
        <image
          style="width: 50rpx; height: 50rpx"
          src="../../static/images/order/z_3.png"
        ></image>
        <view style="margin-top: 10rpx">提现账户</view>
        <view class="bangding" v-if="is_bangding == 0">未绑定</view>
      </view> -->
    </view>
    <view class="border"></view>
    <view class="today_order">
      <view class="title">今日订单</view>
      <view class="order_price">
        <view class="order_c">
          <text class="price">+{{ cashInfo.today_money }}</text>
          <text class="shouru">今日收入</text>
        </view>
        <view class="order_c">
          <text class="price">+{{ cashInfo.frozen_money }}</text>
          <text class="shouru">未到账</text>
        </view>
        <view class="order_c">
          <text class="price">+{{ cashInfo.today_cash }}</text>
          <text class="shouru">提现支出</text>
        </view>
      </view>
    </view>
    <view class="list" v-for="(item, index) in cashInfo.data" :key="index">
      <view class="list_content">
        <view class="left">
          <view class="left_title">{{ item.desc }}</view>
          <text class="left_time">{{ getDate(item.created_at * 1000) }}</text>
        </view>
        <view class="right">
          <view class="price"
            >{{ item.type == 1 ? "+" : "-" }}{{ item.amount }}</view
          >
          <!-- <text class="daozhang">{{
            item.is_daozhang == 0 ? "未到账" : "已到账"
          }}</text> -->
        </view>
      </view>
    </view>
    <view class="btn" @click="$utils.toUrl('/distribution/cash/cashInfo')"
      >查看更多</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      is_bangding: 0,
      cashInfo: {}
    };
  },
  onLoad() {
    this.getCashInfo();
  },
  onShow() {
    this.getCashInfo();
  },
  methods: {
    async getCashInfo() {
      const res = await this.$allrequest.distribution.getCashInfo({}, true);
      if (res.code == 0) {
        this.cashInfo = res.data;
      }
    },
    getDate(val) {
      var date = new Date(val);
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      let hour = date.getHours(); // 获取小时
      let minute = date.getMinutes(); // 获取分钟
      let second = date.getSeconds(); // 获取秒数
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // var currentdate = year + seperator1 + month + seperator1 + strDate;
      var currentdate =
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      return currentdate;
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  min-height: 100vh;
  background: #fff;
  padding: 24rpx;
  .top {
    width: 702rpx;
    height: 208rpx;
    background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 44rpx;
    .title {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    .price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-top: 20rpx;
      .tixian {
        width: 120rpx;
        height: 60rpx;
        background: #ffffff;
        border-radius: 10rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #f0250e;
      }
    }
  }
  .icon_c {
    margin: 50rpx 0rpx 50rpx 20rpx;
    display: flex;
    .icon_i {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: 84rpx;
      position: relative;
      &:first-child {
        margin-left: 0;
      }
      .bangding {
        position: absolute;
        top: -10rpx;
        left: 60rpx;
        width: 94rpx;
        height: 36rpx;
        background: #f0250e;
        border-radius: 120rpx 120rpx 120rpx 120rpx;
        font-size: 22rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
      }
    }
  }
  .border {
    height: 2rpx;
    background: #f8f8f8;
    width: 100%;
  }
  .today_order {
    .title {
      margin: 24rpx 0;
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
    }
    .order_price {
      display: flex;
      justify-content: space-around;
      width: 702rpx;
      height: 168rpx;
      background: #f5f5f5;
      border-radius: 20rpx;
      margin: 0 auto;
      .order_c {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .price {
          font-size: 36rpx;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .shouru {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
          margin-top: 10rpx;
        }
      }
    }
  }
  .list {
    .list_content {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 2rpx solid #f8f8f8;
      .left {
        width: 468rpx;
        .left_title {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .left_time {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        .price {
          font-size: 28rpx;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .daozhang {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
  }
  .btn {
    width: 500rpx;
    height: 80rpx;
    background: #f84d17;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: 700;
    margin: 30rpx auto;
  }
}
</style>
